import {BaseAuthenticateComponent} from "../baseAuthenticate.component";
import {Component, ElementRef, forwardRef, ViewChild, Input, Output, EventEmitter} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {WeUIDialog, WeUIFile, WeUIGallery} from "angular4-weui";
import {DomSanitizer} from "@angular/platform-browser";
import {IMAGE_SIZE} from "../../../constants";
import {FileService} from "../../../service/fileService";
import {WeUIGalleryComponent} from "./weUIGalleryComponent";
import {DialogService} from "../../../service/dialogService";
@Component({
    selector: 'app-image-uploader',
    templateUrl: 'imageUpLoader.component.html',
    styleUrls: ['imageUpLoader.component.css']
})
export class ImageUploaderComponent extends BaseAuthenticateComponent {

    upLoaderAble = true;

    // @Input() imgeNum = 4;

    /**
     * 图片预览控件
     */
    @ViewChild(forwardRef(() => WeUIGalleryComponent)) gallery: WeUIGalleryComponent;

    /**
     * 图片大小提示控件
     */
   // @ViewChild('remind') remindSImage: WeUIDialog;

    // 已选文件
    public files: WeUIFile[] = [];

    /**
     * 预览时用
     * @internal
     */
    public image: WeUIFile;
    imgeNum = 9;

    @Output() fileChange = new EventEmitter<WeUIFile>();

    @ViewChild('uploadEl') uploadElRef: ElementRef


    constructor(protected a_router: Router, public elementRef: ElementRef, public _dialogService: DialogService,
                private sanitizer: DomSanitizer, public route: ActivatedRoute, private _fileService: FileService) {
        super(a_router, elementRef, route, false);
    }

    /**
     * 获取列表中的文件
     */
    getFiles(): WeUIFile[] {
        return this.files;
    }

    /**
     * 文件总数
     * @internal
     */
    getFileCount(): number {
        return this.files.length;
    }

    /**
     * 已上传文件数
     * @internal
     */
    getUploadedFileCount(): number {
        return this.files.filter((file: WeUIFile) => file.isUploaded).length;
    }

    /**
     * 选择图片文件
     */
    onSelect(event: Event): void {
        const picker = event.target as HTMLInputElement;
        const length = picker.files.length;
        for (let i = 0; i < length; i++) {
            const file: File = picker.files.item(i);
            if (file.size > IMAGE_SIZE) {
                this.avoidSizeImage();
                continue;
            }
            const url: string = 'url(' + window.URL.createObjectURL(file) + ')';
            const safeUrl = this.sanitizer.bypassSecurityTrustStyle(url);
            this.files.push(new WeUIFile(file, safeUrl));
            this.fileChange.emit();

            if (this.files.length === this.imgeNum) {
                this.upLoaderAble = false;
                break;
            }
        }
        // 允许上传同一张隐患图片
        this.uploadElRef.nativeElement.value = ''

    }

    /**
     * 预览图片
     */
    preview(file: WeUIFile): void {
        this.image = file;
        if (this.gallery) {
            this.gallery.show();
        }
    }

    /**
     * 退出预览
     */
    fadeOut(): void {
        if (this.gallery) {
            this.gallery.hide();
        }
    }

    /**
     * 删除文件
     * @param {file} 需要从列表中删除的图片
     */
    onDelete(file: WeUIFile): void {
        const index = this.files.indexOf(file);
        if (index >= 0) {
            this.files.splice(index, 1);
        }
        if (this.files.length < this.imgeNum) {
            this.upLoaderAble = true;
        }
    }


    avoidSizeImage(): void {
/*        this.remindSImage.show().then(() => {
        }, () => {
        });*/
        this._dialogService.pushDialogMsg({showNOButton: false, content: "图片大小不能超过15M", btnOKText: "知道了"});
    }

}
